<template>
	<div class="deposit-result-gb-bind px-[25px] md:px-[35px] pt-4 pb-10">
		<div>
			<span>请您在</span>
			<span class="text-danger">{{ format(setSeconds(0, countdown), 'mm:ss') }}</span>
			<span>内, 使用购宝钱包扫码来完成存款。</span>
		</div>
		<div class="h-[25px]" />
		<div class="flex rounded-lg bg-bg-3 text-center">
			<div class="flex-1 p-3">
				<div class="text-sm text-t-2">{{ $t('wallet.depositMethod') }}</div>
				<div class="h-[2px]" />
				<div>{{ result?.payMethodName }}</div>
			</div>
			<div class="w-[1px] my-3 bg-border-1" />
			<div class="flex-1 p-3">
				<div class="text-sm text-t-2">{{ $t('recharge.amount') }}</div>
				<div class="h-[2px]" />
				<div>{{ result?.currency }} {{ fmtBalance(result?.amount, result?.currency) }}</div>
			</div>
		</div>
		<div class="h-2" />
		<BaseTip textT="1G币等值1人民币" />
		<div class="h-1" />
		<BaseTip textT="扫码进行G币转账存款" />
		<div class="h-[25px]" />
		<BaseInput :modelValue="result?.orderNo || ''" class="mb-[25px]" labelT="存款订单号" readonly>
			<template #suffix>
				<BaseCopy :value="result?.orderNo" />
			</template>
		</BaseInput>
		<div class="flex justify-center items-center h-[150px]">
			<div class="w-[150px] h-[150px] p-[6px] bg-white rounded-sm">
				<n-qr-code
					id="deposit-CNY_GB-deposit"
					:value="result?.cnyGbCode"
					:size="138"
					type="svg"
					class="!p-0" />
			</div>
		</div>
		<div class="h-4" />
		<div class="text-center">
			<BaseButton
				class="h-10"
				type="primary"
				:block="false"
				textT="下载图片"
				@click="toImage('deposit-CNY_GB-deposit')" />
		</div>
		<div class="h-[25px]" />
		<BaseButton type="primary" textT="deposit.result.completeDeposit" @click="onClick" />
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { format, setSeconds } from 'date-fns'
import { NQrCode } from 'naive-ui'
import { useWalletStore } from '@/store'
import { fmtBalance, toImage } from '@/utils'
import { useCountdown } from '@/hooks'
import router from '@/router'
import { BaseButton, BaseCopy, BaseInput, BaseTip } from '@/components/base'

const walletStore = useWalletStore()
const result = computed(() => walletStore.submitFiatDepositResult)
const { countdown, reset } = useCountdown()
reset(300)

const onClick = async () => {
	// walletStore.submitFiatDepositResult = null
	walletStore.show.submitFiatDepositResult = false
	walletStore.setWalletDepositShow(false)
	await router.replace({ name: 'transactions.deposit' })
}
</script>

<style scoped></style>
